<template>
  <div class="h-full relative">
    <div ref="map" class="map" tabindex="0"></div>
    <div class="whr-tc-control" ref="my-control">

      <el-tooltip class="box-item" effect="dark" content="图层控制" placement="top-start">
        <el-button type="primary" icon="CopyDocument"/>
      </el-tooltip>


      <el-button type="primary" icon="Edit"/>
      <el-button type="primary" icon="Share"/>
      <el-button type="primary" icon="Delete"/>
      <el-button type="primary" icon="Search">Search</el-button>
      <el-button type="primary">
        Upload
        <el-icon class="el-icon--right">
          <Upload/>
        </el-icon>
      </el-button>
    </div>
    <div class="whr-vertical-control  " ref="my-vertical-control">
      <el-popover placement="left" :width="300" trigger="hover">
        <template #reference>
          <!-- <el-tooltip class="box-item" effect="dark" content="图层控制" placement="top-start"> -->
          <el-button type="primary" icon="CopyDocument"/>
          <!-- </el-tooltip> -->
        </template>
        <template #default>
          <div>
            <div class="whr-popover-title">
              <div class="yigeshu"></div>
              <div class="" style="margin-left: 5px;">图层控制</div>

            </div>
            <el-divider/>
            <div class="whr-popover-body">
              <el-tree node-key="label" :data="layerTreeData" :props="defaultProps" @check-change="layerVisibleControl"
                       :default-checked-keys="defaultCheckedLayers"
                       show-checkbox>
                <template #default="{ node, data }">
                <span class="custom-tree-node">
                  <span>{{ node.label }}</span>
                  <span style="width: 100px;" v-if="data.children.length == 0">
                     <el-slider v-model="data.opacity" size="small" @change="layerOpacityChange($event,data)"/>
                  </span>
                </span>


                </template>
              </el-tree>
            </div>
          </div>
        </template>

      </el-popover>

      <el-button type="primary" icon="Edit"/>
      <el-button type="primary" icon="Share"/>
      <el-button type="primary" icon="Delete"/>

    </div>
  </div>

</template>

<script lang='ts'>


import 'ol/ol.css';
import {defineComponent} from 'vue'
import {initMap, layersData} from "./assets/map"
import Map from 'ol/Map';
import View from 'ol/View';
import {Control, defaults as defaultControls} from 'ol/control';
import LayerGroup from "ol/layer/Group";

class RotateNorthControl extends Control {
  /**
   * @param {Object} [opt_options] Control options.
   */
  constructor(opt_options) {
    const options = opt_options || {};

    const button = document.createElement('button');
    button.innerHTML = '图层';

    const element = document.createElement('div');
    element.className = 'ol-control whr-tc-control';
    element.appendChild(button);

    super({
      element: element,
      target: options.target,
    });

    button.addEventListener('click', this.handleRotateNorth.bind(this), false);
  }

  handleRotateNorth() {
    console.log(this)
    this.getMap()!.getView().setRotation(0);
  }
}

interface Tree {
  label: string
}

type idata = {
  map: Map | null,
  rowcontrol: Control | null,
  vercontrol: Control | null,
  defaultProps: object,
  layerTreeData: {}[],
}
export default defineComponent({
  name: "tianditu",
  data(): idata {
    return {
      map: null,
      rowcontrol: null,
      vercontrol: null,
      defaultProps: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
      },
      layerTreeData: layersData,
    }
  },
  computed: {
    defaultCheckedLayers() {
      let arr = []

      function expendTree(tree: Array<IlayersData>) {
        tree.forEach(e => {
          if (e.children.length > 0) {
            expendTree(e.children)
          } else {
            arr.push(e)
          }
        })
      }

      expendTree(this.layerTreeData)

      return arr.map(e => {
        if (e.visible) {
          return e.label
        }
      })
    }
  },
  created() {
    console.log(navigator.userAgent)
  },
  mounted() {

    const self = this
    console.log("mounted开始")

    class MyelControl extends Control {
      constructor(opt_options: any) {
        const options = opt_options || {};
        super({
          element: self.$refs["my-control"] as HTMLElement,
          target: options.target,
        });
      }
    }

    class MyVerticalControl extends Control {
      constructor(opt_options: any) {
        const options = opt_options || {};
        super({
          element: self.$refs["my-vertical-control"] as HTMLElement,
          target: options.target,
        });
      }
    }

    this.rowcontrol = new MyelControl({})
    this.vercontrol = new MyVerticalControl({})
    this.map = initMap({target: this.$refs.map as HTMLElement})


  },
  methods: {
    fangpi($event: any) {
      console.log($event)
    },
    layerVisibleControl(data: Tree,
                        checked: boolean,
                        indeterminate: boolean) {
      console.log(data, checked, indeterminate)
      let currentLayer = this.map!.getAllLayers().filter(e => {
        return e.getProperties().label == data.label
      })
      if (currentLayer.length > 0) {
        currentLayer[0].setVisible(checked)
      }
    },
    layerOpacityChange($event, data) {
      console.log($event, data)
      let currentLayer = this.map!.getAllLayers().filter(e => {
        return e.getProperties().label == data.label
      })
      if (currentLayer.length > 0) {
        currentLayer[0].setOpacity($event / 100)
      }
    }
  },
  activated() {
    console.log("天地图 activated触发了");
    (this.map as Map).addControl(this.rowcontrol as Control);
    (this.map as Map).addControl(this.vercontrol as Control);
  },
  deactivated() {
    console.log("天地图 deactivated触发了")
  },

})
</script>

<style scoped lang="scss">
.map {
  width: 100%;
  height: 100%;
}

:deep(.whr-tc-control button) {
  top: 80px;
  width: auto;
  padding: 5px 8px;
}

:deep(.whr-tc-control) {
  position: absolute;
  background-color: rgba(203, 203, 203, 0.4);
  border-radius: 4px;
  padding: 3px;
  right: 1.5em;
  top: 1.5em;

  .el-button + .el-button {
    margin-left: 3px;
  }
}

:deep(.whr-vertical-control) {
  position: absolute;
  background-color: rgba(203, 203, 203, 0.4);
  border-radius: 4px;
  padding: 3px;
  right: 1.7em;
  top: 4.5em;
  display: flex;
  flex-direction: column;
  width: 40px;

  .el-button + .el-button {
    margin-left: 0px;
    margin-top: 3px;
  }
}

:deep(.ol-layer canvas) {
  width: 100%;
}

.whr-popover-title {
  font-weight: 500;
  // border-left: var(--el-color-primary) 5px solid;
  display: flex;
  line-height: 1em;

  .yigeshu {
    width: 4px;
    border-radius: 4px;
    background-color: var(--el-color-primary);
  }
}

.el-divider--horizontal {

  margin: 12px 0;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;

  :deep(.el-slider__button) {
    width: 10px;
    height: 10px;
  }
}

</style>

